<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML>
<html lang="en">
	<head>
        <title>webcam demo</title>
		<meta name="author" content="terry - gbin1.com">
		<meta name="description" content="HTML5 webcam demo">
		<meta name="keywords" content="HTML5,webcam,gbin1.com, gbin1, gbtags">
		<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="./photobooth_min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#webcam').photobooth().on("image",function( event, dataUrl ){	
					$('.nopic').hide();
					$( "#pictures" ).prepend( '<img src="' + dataUrl + '" >');
				});
				
				if(!$('#webcam').data('photobooth').isSupported){
					alert('HTML5 webcam is not supported by your browser, please use latest firefox, opera or chrome!');
				}
			});
		</script>
		<style>
			body{
				font-size:12px;
				background: #333;
				font-family: 'Revalia', cursive, arial;
			}
			
			div#pictures,div#webcam{
				margin: 10px 0 0;
			}
			
			h1{
				margin: 20px 0;
			}
			
			#main{
				width: 800px;
				margin: 10px auto;
				background: #FFF;
				color: #333;
				border: 2px solid #FFF;
				box-shadow: 0px 0px 10px #CCC;
				padding:20px;
				border-radius: 5px;
			}
			
			#main article{
				margin-bottom: 50px;
				background: #F8F8F8;
				border-radius: 5px;
				padding:20px;
				border: 1px solid #bbb;
			}
			
			#main #webcam{
				height: 400px;
				width: 100%;
			}
			
			#main #plist{
				margin: 20px 0;
				font-weight: bold;
				border-radius: 5px;
				background: #CCC;
				padding:10px;
			}
			
			#main img{
				margin-bottom: 50px;
				background: #F8F8F8;
				border-radius: 10px;
				box-shadow: 0px 0px 5px #888;
			}			
			
			.clear{
				clear:both;
			}
			
			#main ul{
				list-style:none;
				margin:0;
				padding:0;
			}
			
			#main .photobooth{
				border: 1px solid #ccc;
				border-radius: 5px;
			}
		
		</style>
	</head> 
	<body>
		<section id="main">
			<h1> HTML5 Webcam </h1>
			<article>
			<h1>click the controll menu below, you can controll crop, hue, brightness, take picture </h1>
			<div id="webcam"></div>
			<div id="plist"> picture list </div>
			<div id="pictures"><div class="nopic">no pictures</div></div>
			<div class="clear"></div>
			</article>
		</section>
	</body>	
</html>